<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图标按钮示例</title>
</head>
<body>

<div style="display: flex; justify-content: space-around; padding: 20px 20px; background-color: #ffffff;">

    <!-- 扫一扫 -->
    <div id="btn-scan-1" style="display: flex; flex-direction: column; align-items: center; width: 80px; cursor: pointer;">
        <div style="width: 48px; height: 48px; border-radius: 50%; background-color: #F9F9F9; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;">
            <img src="/linglong-api/files/iconfont/image/5omr5LiA5omr.png" alt="扫一扫" style="width: 36px; height: 36px;">
        </div>
        <div style="font-size: 14px; color: #363A44;">扫一扫</div>
    </div>

    <!-- 检查上报 -->
    <div id="btn-check" style="display: flex; flex-direction: column; align-items: center; width: 80px; cursor: pointer;">
        <div style="width: 48px; height: 48px; border-radius: 50%; background-color: #F9F9F9; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;">
            <img src="/linglong-api/files/iconfont/image/5omn5rOV5Lq65ZGYLeajgOafpeS4iuaKpQ.png" alt="检查上报" style="width: 36px; height: 36px;">
        </div>
        <div style="font-size: 14px; color: #363A44;">检查上报</div>
    </div>

    <!-- 摊位管理 -->
    <div id="btn-stall" style="display: flex; flex-direction: column; align-items: center; width: 80px; cursor: pointer;">
        <div style="width: 48px; height: 48px; border-radius: 50%; background-color: #F9F9F9; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;">
            <img src="/linglong-api/files/iconfont/image/5omn5rOV5Lq65ZGY5pGK5L2N566h55CG.png" alt="摊位管理" style="width: 36px; height: 36px;">
        </div>
        <div style="font-size: 14px; color: #363A44;">摊位管理</div>
    </div>

    <!-- 摊主管理 -->
    <div id="btn-holder" style="display: flex; flex-direction: column; align-items: center; width: 80px; cursor: pointer;">
        <div style="width: 48px; height: 48px; border-radius: 50%; background-color: #F9F9F9; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;">
            <img src="/linglong-api/files/iconfont/image/5omn5rOV5Lq65ZGY5pGK5Li7566h55CG.png" alt="摊主管理" style="width: 36px; height: 36px;">
        </div>
        <div style="font-size: 14px; color: #363A44;">摊主管理</div>
    </div>

</div>

<!-- JS 事件绑定 -->
<script>
    document.getElementById("btn-scan").addEventListener("click", function () {
        alert("点击了 扫一扫");
        // window.location.href = "/scan.html";
    });

    document.getElementById("btn-kanban").addEventListener("click", function () {
        alert("点击了 百姓看板");
        // window.location.href = "/kanban.html";
    });

    document.getElementById("btn-suggestion").addEventListener("click", function () {
        alert("点击了 意见建议");
        // window.location.href = "/suggestion.html";
    });

    document.getElementById("btn-policy").addEventListener("click", function () {
        alert("点击了 政策宣传");
        // window.location.href = "/policy.html";
    });
</script>

</body>
</html>
